<template>
    <div class="item" :style="itemStyle">
        <div class="item-key" :style="keyStyle">
            {{label}}
        </div>
        <div class="item-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
  name: 'kv-item',
  props: {
    label: String
  },
  computed: {
    itemStyle () {
      return {
        color: this.$parent.fontColor || 'inherit',
        'margin-bottom': this.$parent.marginBottom || '20px'
      }
    },
    keyStyle () {
      const width = this.$parent.labelWidth === 'auto' ? this.$parent.labelWidth : this.$parent.labelWidth + 'px'
      return {
        width,
        'text-align': this.$parent.align || 'left',
        'font-weight': this.$parent.fontWeight || 400
      }
    }
  }
}
</script>

<style lang="less" scoped>
.item {
    display: flex;
    align-items: center;
    &-key {
        width: 100px;
        padding-right: 20px;
    }

    &-content {
        position: relative;
        flex: 1;
    }
}
</style>

